<template>
  <div class="flex flex-col h-full bg-[#f7f7f8]">
    <!-- 消息列表区域 -->
    <div class="flex-1 overflow-y-auto" ref="messageContainer"
      :style="{ maxHeight: formDataIsShow ? 'calc(100vh - 600px)' : 'calc(100vh - 200px)' }">
      <div v-if="messages.length === 0" class="flex flex-col items-center justify-center h-full text-gray-400">
        <div class="text-sm">嗨，你好！我是小工同学。</div>
      </div>
      <template v-else v-for="message in messages" :key="message.id">
        <MessageBubble :message="message" />
      </template>
    </div>

    <!-- 新增：可能的后续问题建议 -->
    <div v-if="questionSuggestions.length > 0" class="p-4 bg-white border-t border-b">
      <div class="text-sm text-gray-600 mb-2"></div>
      <div class="flex flex-wrap gap-2">
        <el-button v-for="(question, index) in questionSuggestions" :key="index" size="small"
          @click="fillInput(question)" class="!bg-gray-100 hover:!bg-gray-200">
          {{ question }}
        </el-button>
      </div>
    </div>

    <!-- 表单区域 -->
    <div class="bg-white p-4 border-t" v-if="formDataIsShow">
      <el-form :model="formData" label-width="80px" size="small">
        <el-form-item label="姓名">
          <el-input v-model="formData.name" placeholder="-" />
        </el-form-item>

        <el-form-item label="年龄">
          <el-input-number v-model="formData.age" :min="0" :max="150" placeholder="-" class="!w-full" />
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="formData.address" type="textarea" :rows="2" placeholder="-" />
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker v-model="formData.startTime" type="datetime" placeholder="-" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" class="!w-full" />
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker v-model="formData.endTime" type="datetime" placeholder="-" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" class="!w-full" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 输入框区域 - 固定在底部 -->
    <div class="sticky bottom-0 bg-white border-t">
      <InputBox />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useChatStore } from '../stores/chat'
import MessageBubble from './MessageBubble.vue'
import InputBox from './InputBox.vue'

const chatStore = useChatStore()
const messages = computed(() => chatStore.messages)
const messageContainer = ref<HTMLElement | null>(null)

// 表单数据
interface FormData {
  name: string
  age: number | null
  address: string
  startTime: string
  endTime: string
}

const formData = computed(() => chatStore.formData)
const formDataIsShow = computed(() => chatStore.formDataIsShow)
const questionSuggestions = computed(() => chatStore.questionSuggestions)

// 填充输入框
const fillInput = (question: string) => {
  // 这里需要实现填充输入框的逻辑
  // 可能需要通过chatStore或事件总线来传递问题到InputBox组件
}

// 监听消息变化，自动滚动到底部
watch(() => messages.value.length, () => {
  setTimeout(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
    }
  }, 100)
})
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

/* 表单样式优化 */
:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}
</style>